<template>
  <div class="tab-content-wrap">
    <u-page-config
      :actionBtn="actionBtn"
      label-width="100px"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      :showFilter="false"
      :showTool="false"
      @addRow="addRow"
    >
      <template #orderStatus="{row, item}">
        <el-tag size="small" effect="dark" :type="isTagType(row.orderStatus)">
          {{ getDictLabel(orderStatusOptions, row.orderStatus) }}
        </el-tag>
      </template>

      <template #operationUserName="{row, item}">
        {{ row.orderStatus !== 0 ? row.operationUserName : '' }}
      </template>
    </u-page-config>

    <add-work-order-dialog
      v-model="visible"
      mode="form"
      :device-data="source"
      @getList="getList"
    />

  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import table from "@/mixin/uTable";
import AddWorkOrderDialog from '@/views/operationAndMonitoring/workerOrder/components/addWorkOrderDialog'

import {
  getWorkOrderList,
  addWorkOrder,
} from '@/api/operationAndMonitoring/workOrder'
import {listManager} from "@/api/device/placeManager";

export default {
  name: "WorkOrderList",
  mixins: [table],
  components: {UPageConfig, AddWorkOrderDialog},
  props: {
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 工单状态（0未处理、1处理完成、2不需要处理
      orderStatusOptions: [
        {label: '未处理', value: 0},
        {label: '处理完成', value: 1},
        {label: '不需要处理', value: 2},
      ],
      filterArray: [
        {label: "设备部署名称", key: "deploymentName", type: "input"},
        {label: "工单状态", key: "orderStatus", type: "select", options: []},
        {label: "所属运维人员", key: "operationUserCode", type: "select", options: []},
        {label: "创建时间", key: "daterange", type: "daterange", noRequestParams: true},
      ],
      tableColumn: [
        {label: "工单ID", prop: "id"},
        {label: "生成时间", prop: "createTime", type: 'time'},
        {label: "设备ID", prop: "deviceId"},
        {label: "部署名称", prop: "deploymentName"},
        {label: "异常内容", prop: "message", showOverflowTooltip: true},
        {label: "照片", prop: "image", type: 'image'},
        {label: "处理状态", prop: "orderStatus", type: 'slot', slot: 'orderStatus'},
        {label: "处理时间", prop: "updateTime", type: 'time'},
        {label: "原因及处理结果", prop: "dealResult", showOverflowTooltip: true},
        {label: "处理人", prop: "operationUserName", type: 'slot', slot: 'operationUserName'},
      ],
      actionBtn: [
        {
          type: 'primary',
          text: '创建工单',
          icon: 'el-icon-plus',
          emit: 'addRow',
          permissions: 'operationAndMonitoring:workOrder:add'
        },
      ],
    }
  },
  methods: {
    // tag样式
    isTagType(value) {
      switch (value) {
        case 0:
          return 'danger'
        case 1:
          return 'success'
        case 2:
          return 'info'
      }
    },
    // 表单提交接口相关配置
    formSubmitFunConfig() {
      return {
        addFunc: addWorkOrder,
        modifyFunc: () => {
        },
        pk: 'id',
        options: {
          ...this.form
        },
        cbFunc: () => {
          this.visible = false
        }
      }
    },
    // 添加
    addRow() {
      this.mode = 'form';
      this.visible = true;
    },
    /** 查询工单列表 */
    getList() {
      if (this.source.deviceId) {
        this.getInit(getWorkOrderList, {
          deviceId: this.source.deviceId,
        })
      }
    },
    /** 详细按钮操作 */
    rowDetail(row) {
      this.mode = 'text'
      this.form = JSON.parse(JSON.stringify(selectedItem))
      this.visible = true
      this.title = '详细信息'
      // this.getDetail('详细信息', WorkOrderDetail, row.id)
    },
    /** 返回设备部署页面 */
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {

  }
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}
</style>
